<template>
  <el-dialog title="新增员工" :visible="showDialog" width="50%" @close="btnCancel">
    <el-form ref="form" :model="form" label-width="100px" :rules="rules">
      <el-form-item label="姓名" prop="username">
        <el-input v-model="form.username" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="入职时间" prop="timeOfEntry">
        <el-date-picker type="date" placeholder="请选择入职时间" v-model="form.timeOfEntry" style="width: 100%;"/>
      </el-form-item>
      <el-form-item label="聘用形式" prop="formOfEmployment">
        <el-select v-model="form.formOfEmployment" placeholder="请选择聘用形式" style="width: 100%">
          <el-option :label="item.value" :value="item.id" v-for="item in EmployeeEnum.hireType"
                     :key=item.id></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工号" prop="workNumber">
        <el-input v-model="form.workNumber" placeholder="请输入工号"></el-input>
      </el-form-item>
      <el-form-item label="部门" prop="departmentName">
        <el-input v-model="form.departmentName" placeholder="请选择部门" @focus="getDepartments"></el-input>
        <el-tree v-loading="loading" v-if="showTree" :data="treeData" :props="defaultProps"
                 @node-click="handleNodeClick" default-expand-all></el-tree>
      </el-form-item>
      <el-form-item label="转正时间" prop="correctionTime">
        <el-date-picker type="date" placeholder="请选择转正时间" v-model="form.correctionTime" style="width: 100%;"/>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
    <el-button @click="btnCancel">取 消</el-button>
    <el-button type="primary" @click="btnOk">确 定</el-button>
  </span>
  </el-dialog>
</template>

<script>
  import {getDepartments} from "@/api/departments";
  import {addEmployee} from "@/api/employees";
  import EmployeeEnum from "@/api/constant/employees"
  import {transListToTreeData} from "@/utils";

  export default {
    name: "add-employee",
    props: {
      showDialog: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        EmployeeEnum,
        form: {
          username: '',
          mobile: '',
          formOfEmployment: '',
          workNumber: '',
          departmentName: '',
          timeOfEntry: '',
          correctionTime: ''
        },
        rules: {
          username: [
            {required: true, message: '请输入姓名', trigger: 'blur'},
            {min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur'}
          ],
          mobile: [
            {required: true, message: '请输入手机号', trigger: 'blur'},
            {pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur'}
          ],
          formOfEmployment: [{required: true, message: '请选择聘用形式', trigger: 'blur'}],
          workNumber: [{required: true, message: '请输入工号', trigger: 'blur'}],
          departmentName: [{required: true, message: '请选择部门', trigger: 'change'}],
          timeOfEntry: [{required: true, message: '请选择入职时间', trigger: 'blur'}],
          correctionTime: [{required: true, message: '请选择转正时间', trigger: 'blur'}]
        },
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        showTree: false,
        loading: false // 树形加载进度条
      }

    },

    methods: {
      btnOk() {
        this.$refs.form.validate(async (valid) => {
          if (valid) {
            await addEmployee(this.form)
            this.$parent.showDialog = false
            this.$parent.getEmployeeList()
            this.$message.success("新增员工成功")
          }

        })
      },
      btnCancel() {
        this.form = {
          username: '',
          mobile: '',
          formOfEmployment: '',
          workNumber: '',
          departmentName: '',
          timeOfEntry: '',
          correctionTime: ''
        }
        this.$parent.showDialog = false
        this.$refs.form.resetFields()
      },

      //获取部门
      async getDepartments() {
        this.showTree = true;
        this.loading = true // 打开进度条
        const result = await getDepartments()
        this.treeData = transListToTreeData(result.depts, '')
        this.loading = false
        console.log(result)
      },
      handleNodeClick(data) {
        this.form.departmentName = data.name
        this.showTree = false
      }
    }

  }
</script>

<style scoped>

</style>
